<script setup lang="ts">
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';

import 'swiper/css/pagination';
import 'swiper/css/navigation';

// import required modules
import { Navigation, Pagination } from 'swiper/modules';

interface Props {
    data: any;
}

withDefaults(defineProps<Props>(), {
    data: () => ({}),
});

const swiperModules = [Navigation, Pagination];
</script>

<template>
    <div class="flex flex-col px-12 py-16 space-y-12 bg-blue-100">
        <div class="flex flex-col justify-center items-center">
            <strong class="text-3xl">车型图片</strong>
            <small class="text-2xl text-gray-300">CAR PICTURE</small>
            <span class="line mt-6 relative"> </span>
        </div>
        <Swiper
            :slidesPerView="4.5"
            :spaceBetween="20"
            :navigation="{
                prevEl: '.swiper-prev-btn',
                nextEl: '.swiper-next-btn',
            }"
            :modules="swiperModules"
            :autoplay="{ delay: 2500, disableOnInteraction: false }"
        >
            <!-- 遍历 carShiWuTuList -->
            <template v-for="pic in data.carShiWuTuList" :key="pic.id">
                <SwiperSlide>
                    <a-image :src="pic.imageUrl" :alt="pic.imageName" />
                </SwiperSlide>
            </template>
            
            <!-- 遍历 innerPicList -->
            <template v-for="pic in data.innerPicList" :key="pic.id">
                <SwiperSlide>
                    <a-image :src="pic.imageUrl" :alt="pic.imageName" />
                </SwiperSlide>
            </template>

            <div
                class="flex justify-center items-center gap-x-6 absolute right-0 bottom-0 left-0 z-10"
            >
                <i class="swiper-prev-btn"></i>
                <i class="swiper-next-btn"></i>
            </div>
        </Swiper>
    </div>
</template>

<style lang="scss" scoped>
.line {
    width: 8rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: rgba(18, 63, 255, 1);

    &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 80%;
        height: inherit;
        background-color: #ff4d4f;
        border-radius: inherit;
    }
}

.swiper {
    width: 100%;
    height: 23.75rem;
}

.swiper-slide {
    width: 100%;
    height: 18.75rem;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.swiper-prev-btn {
    transform: rotate(180deg);
}

.swiper-next-btn {
    transform: rotate(360deg);
}

.swiper-prev-btn,
.swiper-next-btn {
    width: 3rem;
    height: 3rem;
    border: 1px solid #ff4d4f;
    border-radius: 50%;
    background-image: url('icons/text.png');
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 1);

    &.swiper-button-disabled {
        opacity: 0.35;
    }
}
</style>
